<template>
    <div id="shopfotter">
        <footer class="tab-down">
            <ul>
                <li v-for="(item,index) in list" :key="index" :class="[item.cls,{'active': isactive == index}]" @click="switchftab(index,item.url)">
                    <i></i>
                    <span>{{item.desc}}</span>
                </li>
            </ul>
        </footer>
    </div>
</template>

<script>
import { mapGetters, mapState } from 'vuex'
import { jumpShop } from '@/utils/common'
export default {
	name: 'ShopFotter',
	data() {
		return {
			list: [
				{ url: '/home', desc: '首页' },
				{ cls: 'catalog', url: '/catalogTwo', desc: '分类' },
				// {cls:'search',url:'/search',desc:'搜索'},
				{ cls: 'cart', url: '/cart', desc: '购物车' },
				{ cls: 'user', url: '/user', desc: '我' }
			],
			isactive: 0
		}
	},
	computed: {
		...mapGetters({ userInfo: 'getBasicUser' })
	},
	mounted() {
		/* var active = localStorage.getItem('shopactive')
            if(active!==null){
                this.isactive = active
            }*/
	},
	methods: {
		switchftab(index, url) {
			this.isactive = index
			uni.setStorageSync('shopactive', index)
			if (index == '0') {
				window.location.reload()
			}
			else {
				this.skipshop(url)
			}
		},
		skipshop(url) {
			jumpShop(url, this.userInfo.user_picture)
		}
	}
}
</script>

<style scoped lang="scss">
    .tab-down {
        position: fixed;
        width: 100%;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 111;
        background: #fff;
        height: 130px;
        box-sizing: content-box;
        box-shadow: -1px -1px 1px #ccc;
    }
    .tab-down ul li{
        float: left;
        width: 25%;
        text-align: center;
        position: relative;
    }
    .tab-down ul .active{
        color: #ff495e;
        i{
            background-color: #ff495e;
            background-position-y: 60px;
        }
    }
    .tab-down ul .active.catalog i{
        background-position-y: 60px;
    }
    .tab-down ul .active.search i{
        background-position-y: 60px;
    }
    .tab-down ul .active.cart i{
        background-position-y: 60px;
    }
    .tab-down ul .active.user i{
        background-position-y: 60px;
    }
    .tab-down ul li i{
        display: block;
        margin: 0 auto;
        width: 60px;
        height: 60px;
        margin-top: 10px;
        background-size: 80%;
        background-repeat: no-repeat;
        background-position: 20px 0;
        background: url($imgUrl + 'common/ec-icon.png');
        background-size: 750px;
    }
    .tab-down ul li {
        position: relative;
        padding: 0.15rem 0;
        text-align: center;
        &.catalog i {
            background-position: -262px 0rem;
        }
        &.search i {
            background-position: -65px 0rem;
        }
        &.cart i {
            background-position: -135px 0rem;
        }
        &.user i {
            background-position: -195px 0rem;
        }
    }
</style>
